<template lang="html">
   <div class="cartbutton-wrapper">
      <i class="icon iconfont icon-jianhao" v-show="food.count>0" @click="reduce()"></i>
      <span v-show="food.count>0">{{food.count}}</span>
        <i class="icon iconfont icon-jiahao" @click="add($event)"></i>
   </div>
</template>

<script>
import Vue from 'vue';
export default {
  props:{
    food:{
      type:Object
    }
  },
  mounted(){

  },
  methods:{
    add(event){
      if(!this.food.count){
        Vue.set(this.food,'count',1)

      }else {
        this.food.count++;
      }
      this.$emit('ball-click',event.target);
    },
    reduce(){
        this.food.count--;
    }
  }
}
</script>

<style lang="less">
@import '../../static/less/var.less';
.cartbutton-wrapper{
  font-size:@base*25rem;
  color:#0391E6;
  span{
    display: inline-block;
    width: @base*40rem;
    text-align: center;
    color:#333;
  }
}
</style>
